/**
 * 排行榜 create to by doujiabao - 20191210
 */

import React, { Component } from 'react'

import $ from 'jquery'
import api from '@/services/api'
import { interval } from '@/utils'

import styles from './index.module.styl'

import Page from '@/components/Page'
import MinComponent from '@/components/MinComponent'
import Navigation from '@/components/Navigation'
import BetterImage from '@/components/BetterImage'
import { Button, Table, Icon, message } from 'antd'

const opMenus = [{
    icon: 'caret-right',
    msg: '播放'
}, {
    icon: 'pause',
    msg: '暂停'
}]

class RankingList extends Component {

    state = {
        fetched: false,
        fetching: true,
        //播放器对象
        player: {},
        //数据集
        data: {},
        //播放列表mid
        playMids: [],
        //全部播放
        allPlay: false,
        //当前播放的歌曲 只用作于全部播放
        allPlayIndex: 0,
        //table columns
        columns: [
            {
                title: '',
                dataIndex: 'key',
                key: 'key',
                width: 100
            },
            {
                title: '歌曲',
                dataIndex: 'songname',
                key: 'songname',
                width: 400,
                render: (val, record, index) => {
                    return <div className={styles.songnameinfo}>
                        <BetterImage src={`http://imgcache.qq.com/music/photo/album_300/17/300_albumpic_${record.data.albumid}_0.jpg`} />
                        <span>{record.data.songname}</span>
                    </div>
                }
            },
            {
                title: '',
                dataIndex: 'ing',
                key: 'ing',
                width: 100,
                render: (val, record, index) => {
                    return record.isplay ? <React.Fragment><Icon type="customer-service" className={styles.ing} /> <Icon type="small-dash" className={styles.ing} /></React.Fragment> : null
                }
            },
            {
                title: '',
                dataIndex: 'operation',
                key: 'operation',
                render: (val, record, index) => {
                    return <div className={styles.operation}>
                        {opMenus.filter((itm, idx) => {
                            const msg = record.isplay ? '播放' : '暂停'
                            return itm.msg !== msg
                        }).map((itm, idx) => <Icon key={idx} type={itm.icon} className={styles.opitem} onClick={() => { this.playstop(record, index, itm) }} />)}
                    </div>
                }
            },
            {
                title: '歌手',
                dataIndex: 'singername',
                key: 'singername',
                width: 200,
                render: (val, record, index) => {
                    let singername = ''
                    record.data.singer.map((itm, idx) => {
                        singername += idx === record.data.singer.length - 1 ? itm.name : itm.name + ' / '
                        return itm
                    })
                    return singername
                }
            },
            {
                title: '时长',
                dataIndex: 'interval',
                key: 'interval',
                render: (val, record, index) => {
                    return interval(record.data.interval)
                }
            }
        ]
    }

    componentDidMount() {

        this.setState({
            player: new window.player({
                loop: true
            })
        })

        //请求列表数据
        $.ajax({
            url: api.rankingList,
            type: "get",
            dataType: 'jsonp',
            jsonp: "jsonpCallback",
            scriptCharset: 'GBK',
        }).done(res => {
            this.setState({
                fetched: true,
                fetching: false,
                data: {
                    ...res,
                    songlist: res.songlist.map((itm, idx) => {
                        //key
                        itm.key = idx + 1
                        //isplay
                        itm.isplay = false
                        //返回
                        return itm
                    })
                },
                playMids: res.songlist.map((itm, idx) => {
                    //返回
                    return itm.data.strMediaMid
                })
            })
        }).fail(err => {
            console.log(err)
        })

    }

    //播放暂停
    playstop = (record, index, opMenu) => {

        const { player } = this.state

        if (opMenu.msg === '播放' || opMenu.msg === '暂停') {

            this.setState({
                //全部播放状态
                allPlay: opMenu.msg === '播放' ? true : false,
                //当前播放
                allPlayIndex: opMenu.msg === '播放' ? index : this.state.allPlayIndex
            }, () => {
                //重置列表
                this.resetTable()
                if (!this.state.allPlay) {
                    //暂停
                    player.pause()
                } else {
                    this.setTable(index)

                    player.play(record.data.strMediaMid)
                }
            })

        } else {
            message.warning('我还没想好用它来做什么')
        }

    }

    //播放全部
    allPlay = () => {
        const { player, allPlay, allPlayIndex, playMids } = this.state

        this.setState({
            allPlay: !allPlay
        })

        if (allPlay) {
            //暂停
            player.pause()
            //重置状态
            this.resetTable()
        } else {
            //播放
            player.play(playMids, { index: allPlayIndex })
            //列表状态
            this.setTable(allPlayIndex)
        }
    }

    //歌曲切换
    switch = (type) => {
        const { player, playMids } = this.state

        const allPlayIndex = type === 'prev' ? (this.state.allPlayIndex > 0 ? this.state.allPlayIndex - 1 : 0) : (this.state.allPlayIndex < playMids.length ? this.state.allPlayIndex + 1 : playMids.length)

        this.setState({
            allPlayIndex
        }, () => {
            this.setTable(allPlayIndex)
            //播放
            player.play(playMids, { index: allPlayIndex })
        })
    }

    //重置列表状态
    resetTable = () => {
        this.setState({
            data: {
                ...this.state.data,
                songlist: this.state.data.songlist.map(itm => {
                    itm.isplay = false
                    return itm
                })
            }
        })
    }

    //设置列表播放状态
    setTable = (index) => {
        this.resetTable()
        this.setState({
            data: {
                ...this.state.data,
                songlist: this.state.data.songlist.map((item, _index) => _index === index ? { ...item, isplay: !item.isplay } : item),
            }
        })
    }

    //table列表样式
    rowClassName = (record) => {
        return record.isplay ? `${styles.tablerow} ${styles.tablerowactive}` : styles.tablerow
    }

    render() {
        const {
            fetched,
            fetching,
            data,
            columns,
            allPlay,
            allPlayIndex
        } = this.state

        const {
            topinfo = {},
            songlist = []
        } = data

        return (<Page
            fetched={fetched}
            fetching={fetching}
        >

            <Navigation />

            <MinComponent>

                <div className={styles.content}>

                    <div className={styles.title}>
                        {topinfo.ListName}
                        <span>{topinfo.info}</span>
                    </div>

                    <div className={styles.btnGroup}>
                        <Button type="primary" style={{ width: '110px' }} icon={!allPlay ? 'caret-right' : 'pause'} onClick={this.allPlay}>{!allPlay ? '播放全部' : '暂停'}</Button>
                        <em></em>
                        <Button icon="step-backward" onClick={() => { this.switch('prev') }} disabled={!allPlay || allPlayIndex === 0}>上一首</Button>
                        <em></em>
                        <Button icon="step-forward" onClick={() => { this.switch('next') }} disabled={!allPlay || allPlayIndex === songlist.length - 1}>下一首</Button>
                    </div>

                    <Table
                        columns={columns}
                        dataSource={songlist}
                        rowClassName={this.rowClassName}
                        locale={{ emptyText: '没有歌曲信息' }}
                    />

                </div>

            </MinComponent>

        </Page>)
    }

}

export default RankingList